<template>
    <div class="item-real-time-monitoring">
        <el-tabs type="card">
            <el-tab-pane label="风险监控屏">
                <span slot="label"><i class="el-icon-discover"></i> 风险监控屏</span>
                <monitoring />
            </el-tab-pane>
            <el-tab-pane label="实时风险结果">
                <span slot="label"><i class="el-icon-document"></i> 实时风险结果</span>
                <monitoringResult />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import monitoring from './item-real-time-monitoring.vue';
import monitoringResult from './item-real-time-monitoring-result.vue';

@Component({
    name: 'ItemRealTimeMonitoring',
    components: {
        monitoring,
        monitoringResult,
    },
})
export default class ItemRealTimeMonitoringMain extends Vue {}
</script>

<style lang="scss" scoped>
.item-real-time-monitoring {
    min-width: 1200px;
    background: #fff;
    padding-top: 10px;
    overflow: auto;
    height: 100vh;
}
.item-real-time-monitoring /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.item-real-time-monitoring /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.item-real-time-monitoring /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}
</style>
